<script setup>
import { ref } from "vue";
import Pc from "@/views/createCommodity/view/pc.vue";

const emits = defineEmits(["confirm"]);
const viewType = ref(1);
const setViewType = (type) => {
  viewType.value = type;
};
//
const confirm = () => {
  emits("confirm");
};
</script>

<template>
  <div class="header">
    <div class="left">
      <h4>
        请预览后提交
        <span
          >审核不通过常见问题 <img src="@/assets/wen-icon.png" alt=""
        /></span>
      </h4>
      <p>请认真检查你的主页是否存在常见问题，如有请先修改再提交</p>
    </div>
    <div>
      <el-button class="confirm-btn" @click="confirm">确认</el-button>
    </div>
  </div>
  <div class="view">
    <div class="view-type">
      <span :class="{ active: viewType === 1 }" @click="setViewType(1)"
        ><img src="@/assets/phone-view-icon.png" alt="" /> 移动端预览</span
      >
      <span :class="{ active: viewType === 2 }" @click="setViewType(2)"
        ><img src="@/assets/pc-view-icon.png" alt="" /> PC预览</span
      >
      <span :class="{ active: viewType === 3 }" @click="setViewType(3)"
        ><img src="@/assets/qr-view-icon.png" alt="" /> 扫码预览</span
      >
    </div>
  </div>
  <div class="view-box">
    <template v-if="viewType === 1"> 移动端预览 </template>
    <template v-if="viewType === 2">
      <pc />
    </template>
    <template v-if="viewType === 3"> 扫码预览 </template>
  </div>
</template>

<style scoped lang="scss">
.header {
  display: flex;
  align-items: center;

  .left {
    flex: 1;

    h4 {
      font-size: 16px;
      margin-bottom: 8px;
      span {
        color: rgba(25, 30, 40, 0.48);
        font-weight: 400;
        font-size: 14px;
        img {
          width: 12px;
          height: 12px;
          cursor: pointer;
        }
      }
    }

    p {
      color: rgba(25, 30, 40, 0.48);
      font-size: 14px;
    }
  }

  .confirm-btn {
    width: 160px;
    height: 48px;
    background: #1dbf73;
    border-radius: 8px 8px 8px 8px;
    color: #fff;
    font-size: 16px;
    border: none;
  }
}
.view {
  background: #ffffff;
  border-radius: 16px 16px 16px 16px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  padding: 20px;
  margin-top: 16px;
  .view-type {
    display: flex;
    span {
      padding: 0 10px;
      height: 36px;
      background: #ffffff;
      box-shadow: 0px 0px 16px 0px rgba(11, 13, 18, 0.06);
      border-radius: 8px 8px 8px 8px;
      border: 1px solid rgba(25, 30, 40, 0.08);
      display: flex;
      align-items: center;
      margin-right: 20px;
      color: rgba(25, 30, 40, 0.6);
      cursor: pointer;
      &.active {
        color: #191e28;
      }
      img {
        width: 20px;
        height: 20px;
        margin-right: 6px;
        position: relative;
        top: 1px;
      }
    }
  }
}

.view-box {
  border: 1px solid rgba(25, 30, 40, 0.08);
  margin-top: 20px;
  border-radius: 16px;
  padding: 20px;
}
</style>